<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--搜索框-->
    <el-form :inline="true" :model="formSerach" class="demo-form-inline" >
        <el-form-item label="姓名">
            <el-input v-model="formSerach.username" placeholder="请输入姓名..."></el-input>
        </el-form-item>
       <!-- <el-form-item label="年龄">
            <el-input v-model="formSerach.age" placeholder="请输入姓名..."></el-input>
        </el-form-item>-->
<!--        <el-form-item label="活动区域">-->
<!--            <el-select v-model="formSerach.region" placeholder="活动区域">-->
<!--                <el-option label="区域一" value="shanghai"></el-option>-->
<!--                <el-option label="区域二" value="beijing"></el-option>-->
<!--            </el-select>-->
<!--        </el-form-item>-->
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--新增和批量删除按钮-->
    <el-row>
        <el-button type="danger" icon="el-icon-delete" @click="batchDelete">批量删除</el-button>
        <el-button type="primary" icon="el-icon-circle-plus"  @click="addPerson">新增信息</el-button>
    </el-row>

    <!--弹出框-->
    <el-dialog center :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="person">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="person.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="person.password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="年龄" :label-width="formLabelWidth">
                        <el-input v-model="person.age" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="电话" :label-width="formLabelWidth">
                   <el-input v-model="person.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio-group v-model="person.stasues">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>



        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelDo">取 消</el-button>
            <el-button type="primary" @click="okDo">确 定</el-button>
        </div>
    </el-dialog>

    <!--数据表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <!--复选框选中多个数据-->
            <el-table-column
                    type="selection"
                    width="55"
            align="center">
            </el-table-column>

            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话">
            </el-table-column>
            <el-table-column
                    prop="stu"
                    label="状态">
            </el-table-column>
            <!--编辑和删除按钮操作-->
            <el-table-column label="操作">
                <!--slot-scope="scope"表示当前scope存储了本行显示的所有的数据
                作为参数传递给函数中方便我们进行删除和修改操作-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </template>

    <!--分页-->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next,->, jumper"
                :total="total">
        </el-pagination>
    </div>



</div>

</body>
</html>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                //搜索框数据
                formSerach: {
                   username:''
                },
                //控制弹出框隐藏和显示
                dialogFormVisible: false,
                //定义弹出框收集的数据模型
                person:{

                },
                formLabelWidth: '120px',
                //表格的数据模型
                tableData: [{
                    id:'001',
                    username:'王小虎',
                    password:'123456',
                    age:18,
                    phone:'13577730600',
                    stasues:'1'
                }, {
                        id:'001',
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'13577730600',
                        stasues:'1'
                    },{
                        id:'001',
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'13577730600',
                        stasues:'1'
                    }],
                //存储着选中多条数据的对象
                multipleSelection: [],
                //分页查询需要携带当前页 与 条数
                //当前页
                currentPage:1,
                //默认总数据条数
                total:100,
                //默认一页显示5条
                pageSize:5,
                title:'',//弹出框的标题
                diaDo:'',//用一个模型标识着当前弹出框的确定按钮是新增还是修改
                deleteIds:[]//存储需要删除的多个id

            }
        },
        methods:{
            //搜索框提交的函数
            onSubmit() {
                //调用分页查询的函数 根据条件判断是直接分页查询还是需要带有条件搜索后分页查询
                this.selectAll();

            },
            // 给表格条件背景色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //修改 删除按钮触发的事件
            handleEdit(row) {
                console.log(row);
                this.title="编辑信息";
                //将当前这行的数据赋值给要显示的弹出框的数据模型
                //也可以根据id取查询一下然后返回结果展示
                this.person = row;
                this.dialogFormVisible =true;
                this.diaDo='update';//修改
            },
            handleDelete(row) {
                console.log(row.id);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //确定 发送删除请求
                    axios({
                        method:'get',
                        url:'http://localhost:8080/javaweb15_axiosdemo/person/deletePerson?id='+row.id
                        //url:`http://localhost:8080/javaweb15_axiosdemo/deletePerson?id=${row.id}`
                    }).then(resp => {
                        if(resp.data == 'success'){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                            this.selectAll();
                        }else{
                            this.$message.error("数据同步错误，稍后重试");
                            // this.$message({
                            //     type:'error',
                            //     message:'失败'
                            // })
                        }
                    });




                }).catch(() => {
                    //取消
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //多选选中触发的事件
            handleSelectionChange(val) {

                //选中哪一行就会把哪一行的数据传入进来存到数组中
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //每页显示的条数发生改变时触发
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                //当数据发生改变重新查询
                this.selectAll();
            },
            //当前页发生改变时触发
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.selectAll();
            },
            //批量删除的函数
            batchDelete(){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //在选择删除的多个数据时已经将数据存储在了数组中 取出id传过后台删除即可
                    for(let i =0 ; i < this.multipleSelection.length; i++){
                        this.deleteIds[i] = this.multipleSelection[i].id;
                    }
                    // console.log(this.deleteIds);

                    //发送请求批量删除
                    axios({
                        method:'post',
                        url:'http://localhost:8080/javaweb15_axiosdemo/person/deletePersonByIds',
                        data:this.deleteIds//带着要删除的id数组
                    }).then(resp => {
                        if(resp.data == "success"){
                            this.$message.success("删除成功！")
                        }
                        this.selectAll();//重新查询
                    });
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '已取消删除'
                    });
                });
            },
            //新增
            addPerson(){
                this.title="新增信息";
                this.person={};
                this.dialogFormVisible = true;
                this.diaDo='insert';//新增
            },
            //查询全部的函数
            selectAll(){
                //不带分页
                // axios({
                //     method:'get',
                //     url:'http://localhost:8080/javaweb15_axiosdemo/person/findAll'
                // }).then(resp => {
                //     console.log(resp.data);
                //     this.tableData = resp.data;
                // });

                //带分页的查询
                axios({
                    method:'post',
                    url:`http://localhost:8080/javaweb15_axiosdemo/person/findByPageIf?currentPage=${this.currentPage}&pageSize=${this.pageSize}`,
                    data:this.formSerach //对象
                }).then(resp => {
                    console.log(resp.data);
                    //还需要一个总数
                     this.total=resp.data.count;

                     this.tableData = resp.data.list;
                });



            },
            //弹出框取消操作函数
            cancelDo(){
                this.dialogFormVisible = false;
                this.person={};//数据清空
                this.$message({
                    type: 'warning',
                    message: '您取消了操作！'
                });
            },
            //弹出框确定操作函数
            okDo(){
                var val = this.diaDo;
                //判断当前窗口是新增还是修改
                if(val == 'insert'){
                    //新增
                    this.addDo();

                }else if(val == 'update'){
                    //修改
                    this.updateDo();

                }
            },
            //发送新增ajax
            addDo(){
                axios({
                    method: 'post',
                    url:'http://localhost:8080/javaweb15_axiosdemo/person/addPerson',
                    data:this.person
                }).then(resp => {
                    //成功的请求
                    if(resp.data == 'success'){
                        this.dialogFormVisible = false;
                        this.$message.success('添加成功');
                        this.person={};
                        //重新查询一次
                        this.selectAll();
                    }else{
                        this.$message.info('服务器错误');
                    }
                }).catch(error =>{
                    //失败的请求
                    this.$message.error('很遗憾，请求失败！');
                });
            },
            //发送修改ajax
            updateDo(){
                axios({
                    method:'post',
                    url:'http://localhost:8080/javaweb15_axiosdemo/person/updatePerson',
                    data:this.person
                }).then(resp => {
                    if(resp.data == 'success'){
                        this.dialogFormVisible=false;
                        this.$message.success("修改成功！");
                        this.selectAll();
                    }else{
                        this.$message.error("数据同步错误，稍后重试！");
                    }

                });
            }
        },
        //页面加载完成
        mounted(){
            //发送ajax异步请求 查询所有数据
            this.selectAll();
        }
    });

</script>